@extends('layout.home')


@section('title','商品详情')
<!--       @if(session('info'))
            <div class='alert alert-info tishi'>
                <li>
                    <img src="/admins/images/info.png" alt="">
                    &nbsp;{{session('info')}}
                </li>
            </div>
            @endif -->


@section('content')
<style type="text/css">
    .flexslider{ width:300px; height:auto; line-height:25px; overflow:hidden} 
    .flex-control-nav{width:350px;height:90px;overflow:hidden;line-height:25px;} 
    #attr li{
        width:50px;
        border:solid 1px #ddd;
        text-align:center;
        cursor:pointer;
        margin-right:10px;
        color:  #52d0c4;
    }  
    #attr .title{
        width:50px;
        border:none;
        text-align:center;
        cursor:default;
        margin-right:10px;
        color:  #52d0c4;
    }
    button.cart {
    background: #52d0c4 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    line-height: 1.6em;
    margin: 1.5em 0 0;
    padding: 0.3em 0.7em;
    text-align: center;
    text-decoration: none;
}

div.quantity {
    position:absolute;
    display:inline-block;
    text-align: center;
    left:10px;
    width:300px;
    height:40px;
}

.hide{
    display:none;
}

.act{
    display:block;
}

</style>

<div class="single">
    <div class="container">
        <div class="col-md-9">
            <div class="col-md-5 grid">
                <div id="iii" class="flexslider">
                    <ul class="slides">
                        @foreach($images as $k=>$v)
                            <li style="width:90px" data-thumb="{{$v->path}}">
                                <div class="thumb-image">
                                    <img src="{{$v->path}}" data-imagezoom="true" class="img-responsive">
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <!-- FlexSlider -->
            
            <script>
                setTimeout(function(){
                    $('.flexslider').flexslider({
                        animation: "slide",
                        controlNav: "thumbnails"
                    });
                },1000);
                // });
            </script>
            <div class="col-md-7 single-top-in">
                <div class="single-para simpleCart_shelfItem">
                    <h1 style="color:black;">
                        {{$goods->title}}
                    </h1>
                    <div class="bot"  style="background:#52d0c4;width:440px; auto;height:1px;margin:20px;"></div>

                    <!-- {!!$goods->detail!!} -->

                    <div class="star-on">
                        <ul>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-star">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-star">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-star">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-star">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-star">
                                    </i>
                                </a>
                            </li>
                        </ul>
                        <div class="review">
                            <a href="#">
                                3 reviews
                            </a>
                            /
                            <a href="#">
                                Write a review
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <label class="add-to item_price">
                        ￥{{$goods->price}}
                    </label>
                    <div class="bot"  style="background:#52d0c4;width:440px; auto;height:1px;margin:10px;"></div>
                        @if($goods->id < 148)
                            <div class="available">
                                <h6>
                                    请您选择颜色和尺寸:
                                </h6>
                                <div id="attr">
                                    <ul class="list-unstyled list-inline" name="color">
                                        <li class="title">颜色:</li>
                                        <li class="attr">黑色</li>
                                        <li class="attr">白色</li>
                                        <li class="attr">灰色</li>
                                        <li class="attr">蓝色</li>
                                        <li class="attr">红色</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="available">
                                <div id="attr">
                                    <ul class="list-unstyled list-inline" name="size">
                                        <li class="title">尺寸:</li>
                                        <li class="attr">M</li>
                                        <li class="attr">X</li>
                                        <li class="attr">XL</li>
                                        <li class="attr">XXL</li>   
                                    </ul>
                                </div>
                            </div>

                        @else
                            <div class="available">
                                <h6>
                                    请您选择颜色和尺寸:
                                </h6>
                                <div id="attr">
                                    <ul class="list-unstyled list-inline" name="color">
                                        <li class="title">颜色:</li>
                                        <li class="attr">黄色</li>
                                        <li class="attr">红色</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="available">
                                <div id="attr">
                                    <ul class="list-unstyled list-inline" name="size">
                                        <li class="title">尺寸:</li>
                                        <li class="attr">35</li>
                                    </ul>
                                </div>
                            </div>
                        @endif
                    <script type="text/javascript">
                        $('input[name=number]').ready(function(){
                                $('input[name=number]').val(1);
                            });
                        $(function(){
                                $('.attr').click(function(){
                                    $(this).siblings().css('background','white');
                                    $(this).siblings().css('color',' #52d0c4');
                                    $(this).css('background','#52d0c4');
                                    $(this).css('color','white');

                                    // 获取点击的当前元素的值
                                    var v = $(this).html();
                                    // 获取当前元素的name值
                                    var name = $(this).parent().attr('name');                                    
                                    // 修改隐藏域的值
                                    $('input[name='+name+']').val(v);
                            }); 
                            //获取文本框 修改值
                           

                            var m = 1;
                            $('#jia').click(function(){
                                // 获取库存
                                var x =$('input[name=number]').attr('max');

                                 if(m < x){
                                      m += 1;                                   
                                        $('input[name=number]').val(m);
                                    }else if(m == x){
                                        m == x;
                                       $('input[name=number]').val(m);
                                        alert("对不起此商品暂时缺货");
                                    }
                            });
                        

                            $('#jian').click(function(){
                                // var number = $('input[name=number]').val();
                                if(m > 1){
                                    m -= 1; 
                                }
                                $('input[name=number]').val(m);
                            });

                        });
                    </script>
                    <div style="padding-left:270px;">
                        <!-- <a href="#" class="cart item_add">
                            加入购物车
                        </a> -->
                        <form class="cart nobottommargin clearfix" method="post" action="/cart/add" enctype="multipart/form-date">
                            <div class="quantity">
                                <p id="h4.-bootstrap-heading" style="text-align:left;">请选择数量：</p><input id="jian" d type="button" value="-" class="btn btn-sm btn-info">
                                <input type="text" step="1" min="1" max="{{$goods->kucun}}" name="number" value=""  class="btn btn-sm btn-info" size="4"/>
                                <input type="button" id="jia" value="+" class="btn btn-sm btn-info"> 
                                <input type="hidden" name="id" value="{{$goods->id}}">
                                <input type="hidden" name="color" value="">
                                <input type="hidden" name="size" value="">
                            </div>  
                             {{csrf_field()}}
                            <button type="submit" class="cart item_add">加入购物车</button>
                        </form>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"slide":{"type":"slide","bdImg":"2","bdPos":"right","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

                        <script type="text/javascript">
                            $('input[name=color]').ready(function(){
                                $('input[name=color]').val('');
                            });
                                $('input[name=size]').ready(function(){
                                $('input[name=size]').val('');
                            });

                            $('button').click(function(){
                                var s = $('input[name=size]').val();
                                var c = $('input[name=color]').val();
                                if( c == ''){
                                    alert('请选择颜色');
                                     return false;
                                }

                                if(s == ''){
                                    alert('请选择尺码');
                                    return false;
                                }
                            });
                        </script>
                    </div>
                </div>
            </div>
            <div class="clearfix">
            </div>
             <div class="bot"  style="background:#52d0c4;width:800px; auto;height:1px;margin:20px;"></div>
             <h4 style="color:#52d0c4;">店主推荐</h4>
              
            <div class="content-top1">
                @foreach($tuijian as $k=>$v)
                    <div class="col-md-4 col-md3">
                        <div class="col-md1 simpleCart_shelfItem">
                            <a href="/home/detail/{{$v->id}}.html">
                                <img class="img-responsive" src="{{$v->path}}" alt="" />
                            </a>
                            <h5>
                                <a href="/home/detail/{{$v->id}}.html" style="text-decoration:none">
                                    {{$v->title}}
                                </a>
                            </h5><br>
                            <div class="price" >
                                <h5 class="item_price" >
                                    ￥ {{$v->price}}
                                </h5>
                                <a href="/home/detail/{{$v->id}}.html" class="item_add">
                                    点击查看
                                </a>
                                <div class="clearfix">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
            <!-- <div class="clearfix"> -->
            </div>
            <div class="clearfix"></div>
            <div class="bot" style="background:#52d0c4;width:800px; auto;height:1px;margin:40px;margin-left:15px"></div>
            
            <!-- 详情 评论 start -->
            <div class="">
                <ul class="nav nav-tabs" role="tab_t">
                    <li role="tab" tp="detail" class="active">
                        <a href="#">商品详情</a>
                    </li>
                    <li role="tab" tp="comments">
                        <a href="#">评价</a>
                    </li>
                </ul>
            </div>
            <div role="tab_c">
                <div class="">
                    {!!$goods->detail!!}
                </div>
                <div class="hide">
                    <style type="text/css">
                        .table-comments tr{
                            border-bottom:solid 1px #ddd;
                        }
                        .table-comments tr td{
                            color:#333;
                            font-family:tahoma,arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
                            font-size:12px;
                            line-height:1.5;
                            position:relative;
                        }
                    </style>
                    <!-- 评论 start -->
                    <table class="table table-hover text-left table-comments" >
                        @foreach($comments as $k=>$v)
                        <tr>
                            <td width="60%" >
                                <div class="content">
                                    <div class="content-text" >
                                        {{$v->content}}
                                    </div>
                                    @if(!empty($v->pic))
                                    <div class="photos">
                                        <ul class="ul list-unstyled list-inline t-photos">
                                            @foreach($v->pic as $kk=>$vv)
                                                <li flag="{{$v->id}}" data-src="{{$vv->path}}">
                                                    <img src="{{$vv->path}}" width="40px" alt="">
                                                </li>
                                            @endforeach
                                        </ul>
                                        <div flag="{{$v->id}}" class="big-photo hide" >
                                            <ul class="ul list-unstyled">
                                                <img src="" width="200px" alt="">
                                            </ul>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                
                                <div class="date">
                                    {{date('m.d',$v->time)}}
                                </div>
                            </td>
                            <td width="25%">
                                <div class="sku" style="position:absolute;top:45%;">
                                    <p><span>颜色分类:</span>{{$v->goodsInfo->goods_color}}</p>
                                    <p><span>尺码:</span>{{$v->goodsInfo->goods_size}}</p>
                                </div>
                            </td>
                            <td>
                                <div class="rate-user-info" style="position:absolute;top:45%;">
                                    <span>{{$v->username->username}}</span>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </table>
                    <script type="text/javascript">
                        // $(function(){
                        setTimeout(function(){
                            var lis = $('.photos ul').children('li');
                            //定义一个数组 存放 flag相同(即同一评论)的src 
                            var srcs = [];
                            lis.click(function(){
                                var flag = $(this).attr('flag');
                                //每条评论只能存放一条src 如果已存在,说明之前是显示状态
                                // $.inArray(value,array) 判断是否在 srcs数组中 不存在返回-1 存在则返回索引
                                if($.inArray($(this).attr('data-src'),srcs) != -1){
                                    if($('.photos .big-photo[flag='+flag+']').css('display') == 'none'){
                                        $('.photos .big-photo[flag='+flag+']').removeClass('hide');
                                        return;
                                    }
                                    $('.photos .big-photo[flag='+flag+']').addClass('hide');
                                    return;
                                }
                                
                                src = $(this).attr('data-src');
                                //存放src
                                srcs[flag] = src;
                                
                                $('.photos .big-photo[flag='+flag+']').removeClass('hide');
                                $('.photos .big-photo[flag='+flag+'] img').attr('src',src);
                            });

                        },1000);
                        // });     
                    </script>
                    <!-- 评论 end -->
                </div>
            </div>
            <!-- 详情 评论 end -->
        </div>
        <script type="text/javascript">
            var liss = $('ul[role=tab_t]').children();
            var divs = $('div[role=tab_c]').children();
            // var len = liss.length;
            // for(i=0;i<len;i++){
                liss.click(function(){
                    // alert(222);
                    var i = $(this).index();
                    liss.removeClass('active');
                    $(this).attr('class','active');
                    divs.addClass('hide');
                    divs.eq(i).removeClass('hide');
                    // alert(333);
                    return false;
                });
            // }
        </script>

        <script type="text/javascript">
       

        $(function () {
                // 获取广告div的高度
                var divheight = $('#fixed_side').height();
                var footertop = $(".footer").offset().top;
                var H = footertop - divheight;
                var dtop = $("#fixed_side").offset().top;
                $(window).scroll(function()
                {
                    var top = $(window).scrollTop();
                    
                     if(top >= dtop){
                        $('#fixed_side').css({'position':'fixed','right':'30px'});
                         if(top >= H){
                             $('#fixed_side').css({'position':'absolute','top':H+'px','right':'0px'});     
                        }else{
                            $('#fixed_side').css({'position':'fixed','right':'30px','top':'20px'});
                        }    
                    }else if(top <= dtop ){  
                        $('#fixed_side').css({'position':'','right':'0px'});
                    }
                });           
            });


        </script>
        <div class="col-md-3 product-bottom" id="fixed_side" style="top:0px;right:0px">
            <!--categories-->
          
            <script type="text/javascript">
                $(function() {
                    var menu_ul = $('.menu-drop > li > ul'),
                    menu_a = $('.menu-drop > li > a');
                    menu_ul.hide();
                    menu_a.click(function(e) {
                        e.preventDefault();
                        if (!$(this).hasClass('active')) {
                            menu_a.removeClass('active');
                            menu_ul.filter(':visible').slideUp('normal');
                            $(this).addClass('active').next().stop(true, true).slideDown('normal');
                        } else {
                            $(this).removeClass('active');
                            $(this).next().stop(true, true).slideUp('normal');
                        }
                    });

                });
            </script>
            <!--//menu-->
            <!--seller-->
         
            <div class="product-bottom">
                <h3 class="cate">
                    本周热卖
                </h3>
                @foreach($arr as $k=>$v)
                <div class="product-go">
                    <div class=" fashion-grid">
                        <a href="/home/detail/{{$v->id}}.html">
                            <img class="img-responsive " src="{{$v->path}}" alt="">
                        </a>
                    </div>
                    <div class=" fashion-grid1">
                        <h6 class="best2">
                            <a href="/home/detail/{{$v->id}}.html">
                                {!!$v->title!!}
                            </a>
                        </h6>
                        <span class=" price-in1">
                            {{$v->price}}
                        </span>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
                @endforeach
            </div>
         
            <!--//seller-->
            <!--tag-->
           
       
        <div class="clearfix"></div>
    </div>
</div>


<!-- 详情 end -->

@endsection



@section('js')
	<!-- slide -->
        <script src="/homes/js/jquery.min.js"></script>
        <script src="/homes/js/imagezoom.js"></script>
        <!-- start menu -->
        <link href="/homes/css/memenu.css" rel="stylesheet" type="text/css" media="all"
        />
        <script type="text/javascript" src="/homes/js/memenu.js"></script>
        <script>
            $(document).ready(function() {
                $(".memenu").memenu();
            });
        </script>
        <script src="/homes/js/simpleCart.min.js"></script>
        <!--initiate accordion-->
        <script type="text/javascript">
            // $(function() {
                var menu_ul = $('.menu-drop > li > ul'),
                menu_a = $('.menu-drop > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if (!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true, true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true, true).slideUp('normal');
                    }
                });

            // });
        </script>
        
        <!---pop-up-box-->
        <link href="/homes/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"
        />
        <script src="/homes/js/jquery.magnific-popup.js" type="text/javascript"></script>
        <!---//pop-up-box-->
        <script>
            $(document).ready(function() {
                $('.popup-with-zoom-anim').magnificPopup({
                    type: 'inline',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    midClick: true,
                    removalDelay: 300,
                    mainClass: 'my-mfp-zoom-in'
                });

            });
        </script>
@endsection